<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 页面弹出效果 
		 show()  功能：显示效果  本质：display:block
		 hide()   功能:隐藏效果  本质：display：none
		 
		 slideDown()  功能：（滑动式）向下效果
		 slideup()    功能：(滑动时) 向下效果
		 
		 fadeIn（毫秒数）  功能： 淡入效果
		 fadeOut(毫秒数)   功能： 淡出效果
		 
		 hover()   功能：悬停切换效果
		 -->
		 <style>
			div{
				width: 200px;
				height: 200px;
				background-color: aqua;
				display: none;
			} 
			 
		 </style>
	</head>
	<body>
		<button id="show">显示</button>
		<button id="hide">隐藏</button>
		<button id="sd">滑动式向下</button>
		<button id="su">滑动式向上</button>
		<button id="fi">淡入</button>
		<button id="fo">淡出</button>
		<div></div>
		<script>
			/*1.显示隐藏效果*/
			$("#show").click(function(){
				$("div").show();
			});
			$("#hide").click(function(){
				$("div").hide();
			});
			/*2.滑动 向上向下效果*/
			$("#sd").click(function(){
				$("div").slideDown();
			});
			$("#su").click(function(){
				$("div").slideUp();
			});
			/*3.淡入 淡出效果*/
			$("#fi").click(function(){
				$("div").fadeIn(1000);
			});
			$("#fo").click(function(){
				$("div").fadeOut(1000);
			});
			// tab选项卡   ---BOM吸顶灯
		</script>
	</body>
</html>